<template> 
	<view class="content" >
		<view  class="head_nav" :style="{background: 'url('+ bgurl +'/policy/user_img/my_bg.png)'}">
			<view class="navs" >
				<!-- <image style="width: 100%;position: absolute; z-index: -1;" src="@/static/picture/indexbg.png" mode="widthFix" lazy-load></image> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="wid" :style="{height: `${statusBarHeight}px`}"></view>
				<!-- #endif --> 
				<view class="navbar"  :style="{height: `${titleBarHeight}px`}"> 
					<view class="search" :style="{lineHeight: `${titleBarHeight}px`,width: `${barLeft1}rpx`}">
						<view class="address"  :style="{lineHeight: `${titleBarHeight}px` }" @click="openPicker">
							<image src="@/static/picture/address3.png" mode="widthFix" lazy-load></image>
							<view class="city">{{pickers}}</view>
							<image  style="width:16rpx;height: 10rpx;" src="@/static/picture/down1.png" mode="widthFix" lazy-load></image>  
						</view>
						<view class="fx-row-sb-c ml10"  :style="{width: `${barLeft2}rpx`}"  @click="goSearch"> 
							<span class="ft28 grey2">搜索</span> 
							<uv-icon style="margin-left: 12rpx;" name="search" color="#999999" size="20"></uv-icon>
						</view>
						<!-- <span class="search_btn">搜索</span> -->
					</view> 
					<uv-picker ref="picker" :columns="columns"   @confirm="confirm"></uv-picker>
				</view> 
			</view>
			<!-- 2.0版本注释技师等级分类 -->
			<!-- <view class="tabsnav">
				<uv-tabs  class="tabs" :list="tab1" lineWidth="45"  lineHeight='3'  lineColor="#AD8539" :scrollable= 'false' keyName='dictTag' :current='tabindex'
					:activeStyle="{ color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}" 
					:inactiveStyle="{color: '#989BA1',transform: 'scale(1)'}"
					itemStyle="height: 90rpx;font-size:28rpx" 
					@change="tabChange1"
					></uv-tabs> 
			</view> -->
		</view> 
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{height: `${allBarHeight}px`}"></view> 
		<!-- #endif --> 
		<!-- #ifdef H5 --> 
		<view :style="{height:'calc(10rpx + '+ allBarHeight+'px)'}"></view> 
		<!-- #endif -->  
		<view class="userList"> 
				<!-- 技师列表 -->
				<!-- <list v-if="total>0" :projectList='project' @godetails='godetails' @collect='collect' @reserve='reserve'></list>  -->
				<view class="location" v-if="location">
					<view class="location_empty">
						<image class="address_icon" src="@/static/picture/default.png" mode="widthFix"></image>
						<image v-if="locationState" class="icon_error" src="@/static/picture/default_close.png" mode="widthFix"></image>
					</view>
					<view v-if="locationState"  class="again_btn" @click.stop="getLocation()">重新定位</view>
					<view v-if="!locationState" class="locating">正在获取您的定位~</view>
					<view class="location_tips"  v-if="locationState" >
						<view class="ft30" style="color: #000;font-weight: bold;">您可以尝试以下操作：</view>
						<view style="margin-top: 56rpx;">1.系统无法获取到您的定位信息，请确保您微信以及手机的定位已打开。</view>
						<view style="margin-top: 30rpx;">2.如您需要<span class="brown">继续下单</span>，可以<span class="brown">手动切换</span>到您所在的<span class="brown">城市</span>，但是由于我们没有您的具体位置，所以页面上显示技师的距离并不准确，<span class="brown">实际距离以您下单时订单页面计算的距离为准！</span></view>
					</view>
				</view>
				<view v-else>
					<view v-if="total>0" class="user_item fx-row-sb-c" v-for="(item,index) in project" :key='item.id' @click.stop="godetails(item,index)"> 
						<view class="user_pho fx-row-c-c  mr4" @click.stop="seeImg(item.workPhotoAndLifePhoto)">
							<view class="label label_bg1" v-if="item.status!=10 && item.subStatus==10" >{{item.tag}}</view>
							<view class="label label_bg2" v-if="item.status!=10 && item.subStatus==20" >{{item.tag}}</view>
							<view class="label label_bg3" v-if="item.status==10" >休息中</view>
							<image class="e_icon" v-if="item.type==20" src="@/static/picture/excellent.png" ></image>
							<view class="picture mr26"> 
								<image :src="item.workPhoto"  mode='aspectFill' ></image>
							</view> 
						</view>
						<view class="fx-col-sb" style="width: 448rpx; height: 160rpx;">
							<view class="fx-row-sta">
								<view class="text-beyond ft30 user_name">{{item.name}}</view>
								<view class="user_collect fx-row-sta" @click.stop="collect(item)">
									<image class="mr4" v-if="!item.userCollectionFlag" src="@/static/picture/collect.png"></image>
									<image class="mr4" v-else src="@/static/picture/collect_act.png"></image>
									<span >{{item.followCount}}</span>
								</view>
							</view> 
							<view class="fx-row-sta grey3"> 
								<span class="text-beyond ft24" style="width: 200rpx;">已服务：{{item.selectCount}}单 </span>
							</view> 
							<view class="fx-row-sta mt10 grey3 ft26">
								<view class="fx-row-sta mr26">
									<image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;" src="@/static/picture/grade.png" mode="widthFix" lazy-load></image>
									<span>{{item.score}}</span>
								</view>
								<view class="fx-row-sta ">
									<image style="width: 22rpx;height: 24rpx;margin-right: 6rpx;" src="@/static/picture/address3.png" mode="widthFix" lazy-load></image>
									<span>{{item.distance}}km</span> 
								</view> 
							</view> 
							<view class="item_float  ft18"  >最早可约: {{item.appointmentTime}}</view>  
							<view class="item_btn" @click.stop="reserve(item,index)" v-if="item.status!='10'">立即预约</view> 
							<!-- <view class="item_btn" @click.stop="reserve(item,index)" >立即预约</view>  -->
						</view>    
					</view>
					<empty v-if="total==0" title="没有相关技师"></empty>
				</view> 
				<uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
		</view>  
		
		<!-- 预约弹窗 -->  
		<uv-popup mode='bottom'  zIndex='991' round="12" duration='300' closeable ref="popup" :close-on-click-overlay="false" >
			<subscribeList ref="cou" :state="stateindex" :projectList="projectLists" :projectInfo="projectInfo"   @addProject='placeOrder' @goInfor='goInfor'></subscribeList> 
		</uv-popup> 
	
	</view> 
</template>

<script>
	import { projectList,massagistList,massagistDetails ,dictType,geturl,isToken,collection,cityAll,getCityByLocation} from '@/utils/api.js'
	import badgeMix from '@/common/mixins.js'
	import subscribeList from '@/components/subscribe-list.vue' 
	import list from '@/components/technician-list.vue'
	import { string } from '../../uni_modules/uv-ui-tools/libs/function/test'
	import config from '@/config.js'  
	import empty from '@/components/empty.vue'
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		mixins: [badgeMix],
		components:{list,subscribeList,empty},
		data() {
			return {
				titleBarHeight:this.titleBarHeight,
				statusBarHeight:this.statusBarHeight,
				allBarHeight:this.allBarHeight, 
				safeareaHeight:this.safeareaHeight,   
				barLeft1:this.barLeft - 108,
				barLeft2:this.barLeft - 272,
				searchWidth:'',
				stateindex:'0',
				columns: [],  //城市列表 
				pickers:'请选择',
				tab1: [],
				tab2: [],
				tabindex:0,
				isShow:true,
				projectLists:[],
				projectInfo:{}, 
				project:[],
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				total:1, //技师总条数
				serviceId:'', //项目id
				pageshow:{},
				levelId:'' , //级别
				bgurl:config.imageUrl, 
				citysId:'', //城市id  
				location:false, //是否在定位
				locationState:false, //定位状态
			}
		},
		//监听页面隐藏
		onHide() {  
			this.$refs.popup.close(); 
		}, 
		async onShow() {  
			this.isShow = true    
			// await this.getjsList()  //2.0直接调用技师列表，不根据等级筛选 
		
			
		},
		async onLoad(option) {   
			this.pageshow = option 
			this.serviceId = option.id
			await this.getCity()    
			await this.getLocation()  //获取定位  
			// #ifdef H5
			await this.$u.init()
			await this.$u.share() 
			// #endif   
		},
		methods: {     
			seeImg(img){
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: img //预览图片的地址，必须要数组形式
				}) 
			}, 
			reload() { 
					const pages = getCurrentPages() 
					const curPage = pages[pages.length - 1] 
			},   
			// 技师级别tab栏
			tabListjb(){  
				dictType({"type":"massagistLevel"}).then((res) => {
					if(res.code == '200'){  
						this.project = []
						this.pageNum = 1 
						this.tab1 = res.result[0].ddList 
						this.levelId = this.tab1[this.tabindex].dictValue
						// this.tabindex = 0
						console.log(this.tabindex,this.tab1[this.tabindex].dictValue,"this.tabindex");
						this.getjsList('',this.tab1[this.tabindex].dictValue)  
					}
				})
			},
			// 技师列表
			getjsList(serviceId,levelId){  
				this.isLoading = 'loading'   
				console.log(uni.getStorageSync('longitude'),uni.getStorageSync('latitude'),uni.getStorageSync('cityId'));
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数
					"lon":uni.getStorageSync('longitude'),  //经度
					"lat":uni.getStorageSync('latitude'),  //纬度 
					"serviceId":serviceId,  //项目id
					"type":levelId, //技师级别id 
					"massagistName":"",
					"cityId":this.citysId, //城市id  
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif
				}   
				massagistList(datas).then((res) => { 
					console.log(res);  
					if(res.code == '200'){ 
						this.project = res.result.records
						this.total = res.result.total 
						this.isLoading = 'nomore'  
					}
				})  
			},
			// 技师级别筛选
			tabChange1(e,state){ 
				console.log(e.dictValue,e.dictTag); 
				this.tabindex = e.index
				this.levelId = e.dictValue 
				this.project = []
				this.pageNum = 1
				this.getjsList('',e.dictValue)
				this.$refs.popup.close(); 
			}, 
			// 技师搜索
			goSearch(){
				uni.navigateTo({
					url:'/pages/technician/searchs'
				})
			},
			// 选择地址
			openPicker() {
				this.$refs.picker.open();
			},
			// 立即预约弹窗
			async reserve(item,index){   
				await this.enterPrecontract(item.id).then((res)=>{  
					if(res == 200){ 
						// 技师详情
						const datas = {
							'massagistId':item.id,
							"lon":uni.getStorageSync('longitude'),  //经度
							"lat":uni.getStorageSync('latitude'),  //纬度 
							// #ifdef MP-WEIXIN
							"source" : 'WeChatMini',
							"version" : config.appInfo.version
							// #endif
						}
						massagistDetails(datas).then((res) => { 
							if(res.code == '200'){ 
								res.result.serviceList.forEach((item,index)=>{
									res.result.serviceList[index].num = 0
								})
								this.projectLists = res.result.serviceList
								this.projectInfo = res.result 
							}  
						}) 
						this.$refs.popup.open('bottom');  
					}else if(res.code == 8001){
						toast(res.message)
						setTimeout(()=>{
							this.getjsList()
						},1000)
					}
				}) 				
			},
			// 立即预约
			async placeOrder(addOrderId,num,mid){  
				this.$refs.popup.close(); 
				uni.navigateTo({
					url:`/pages/order/orderPay?pid=${addOrderId}&mid=${mid}&num=${num}`
				})  
			},
			// 项目详情
			goInfor(projectId){  
				this.$refs.popup.close(); 
				uni.navigateTo({
					url:'/pages/index/details?id='+projectId
				})
			},
			// 技师详情
			godetails(item,index){ 
				uni.navigateTo({
					url:'/pages/technician/userDetail?id='+item.id
				})
			},
			// 技师收藏
			collect(item){ 
				this.isCollect(item.id).then((res)=>{
					this.$nextTick(()=>{ 
						item.userCollectionFlag = !item.userCollectionFlag  
						item.userCollectionFlag?item.followCount=item.followCount+1:item.followCount!=0?item.followCount=item.followCount-1:item.followCount 
					}) 
				}) 
			},
			// 获取当前定位
			async getLocation(){ 
				console.log("获取定位~~~~")
				var _this = this   
				if(!uni.getStorageSync('isManual')){
					_this.location = true
					_this.locationState=false
					_this.pickers = '定位中'
				} 
				if(uni.getStorageSync('cityId') || uni.getStorageSync('cityName')){ 
					_this.citysId = uni.getStorageSync('cityId')
					_this.pickers = uni.getStorageSync('cityName')
					await _this.getjsList() 
				}
				// #ifdef H5   
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true, //开启高精度定位默认false
					highAccuracyExpireTime:3000,
					success: async function(res) { 
						_this.location = false
						uni.setStorageSync('longitude',res.longitude)
						uni.setStorageSync('latitude',res.latitude)   
						if(!uni.getStorageSync('cityId') || !uni.getStorageSync('cityName')){ 
							await _this.getCurrentCity()
							await _this.getCity()
							_this.citysId = await uni.getStorageSync('cityId')
							_this.pickers = await uni.getStorageSync('cityName')
							await _this.getjsList() 
						}
						// await _this.getjsList()
					},
					fail:async (err) => {
						// alert(JSON.stringify(err))
						// _this.locationState=true
						// _this.pickers = '定位失败'
						console.error("err", err) 
						if(!uni.getStorageSync('cityId') || !uni.getStorageSync('cityName')){  
							this.location = true
							this.locationState=true
							this.pickers = '定位失败' 
						}else{
							this.location = false
							await _this.getCurrentCity()
							await _this.getCity()
							_this.citysId = await  uni.getStorageSync('cityId')
							_this.pickers = await uni.getStorageSync('cityName') 
							await _this.getjsList() 
						}
					}
				});  
				// #endif
				
				// #ifdef MP-WEIXIN
				console.log("小程序获取定位");
				uni.authorize({
					scope: 'scope.userFuzzyLocation',
					success: () => { 
						this.getLocationInfo(); // 允许授权
					},
					fail: () => { 
						this.openConfirm();// 拒绝授权
					}
				})  
				// #endif 
			},
			// 小程序获取地理位置
			// 获取地理位置
			 getLocationInfo(){
				 var _this = this;
				 // #ifdef MP-WEIXIN
					uni.getFuzzyLocation({
						type: 'wgs84', 
						success:async function (res) { 
							console.log(res,"小程序定位"); 
							_this.location = false
							uni.setStorageSync('longitude',res.longitude)
							uni.setStorageSync('latitude',res.latitude) 
							if(!uni.getStorageSync('cityId') || !uni.getStorageSync('cityName')){ 
								await _this.getCurrentCity()
								await _this.getCity()
								_this.citysId = await uni.getStorageSync('cityId')
								_this.pickers = await uni.getStorageSync('cityName')
								await _this.getjsList() 
							} 
						},
						fail: (info) => { 
							_this.openConfirm()
						} 
					});
					// #endif 
			 }, 
			 // 再次获取授权。当用户第一次拒绝后再次请求授权
			async openConfirm(){
				if(!uni.getStorageSync('cityId') || !uni.getStorageSync('cityName')){
					uni.showModal({
							title: '请求授权当前位置',
							content: '需要获取您的地理位置，请确认授权',
							success:async (res)=> {
							if (res.confirm) {
								uni.openSetting();// 打开地图权限设置
							} else if (res.cancel) {
									this.location = true
								 this.locationState=true
								 this.pickers = '定位失败'
									uni.showToast({
									title: '你拒绝了授权，无法获得周边的技师信息',
									icon: 'none',
									duration: 1000
									}) 
									// if(!uni.getStorageSync('cityId') || !uni.getStorageSync('cityName')){
										
									// } 
								}
							}
					});
				}else{
					this.location = false
					await this.getCurrentCity()
					await this.getCity()
					this.citysId = await  uni.getStorageSync('cityId')
					this.pickers = await uni.getStorageSync('cityName') 
					await this.getjsList() 
				} 
				
			}, 
			async confirm(e) {
				console.log('confirm', e);
				this.pickers = e.value[0]  
				await cityAll().then((res) => {
					if(res.code == '200'){ 
						res.result.forEach((item,index)=>{   
							if(item.cityName.indexOf(e.value[0]) != -1 ){
								this.citysId = item.id   
								uni.setStorageSync('cityId',item.id) 
							}  
						})    
					}
				})  
				uni.setStorageSync('cityName',e.value[0]) 
				uni.setStorageSync('isManual',true,10000)
				this.location = false
				this.locationState=false
				await this.getjsList()
			}, 
		},
		// 上拉刷新
　　onReachBottom() {  
			//如果最后一次请求，数据为空的话就停止请求，防止多次触发接口
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++
			//调用请求接口
			this.getjsList('',this.levelId)
		},
		onPullDownRefresh() {  
			console.log("下拉刷新");
			this.project = []
			this.pageNum = 1
			this.getjsList('',this.levelId) 
			setTimeout(function () { 
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page ;
	}
	
	.head_nav{
		position: fixed;
		top: 0;
		width: 750rpx;	
		// height:calc( var(--status-bar-height) + 50px);  
		// background-size:  100% auto; 
		background-size: 100% auto !important;
		box-sizing: border-box; 
		overflow: hidden;
		z-index: 999;
		.navs{
			
			// #ifdef MP-WEIXIN
			padding-bottom:30rpx ;
			// #endif 
			// #ifdef H5
			height: 100rpx;
			// padding-bottom:5rpx !important;
			// #endif 
		}
		.navbar{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			width: 690rpx;
			text-align: center;
			font-size: 40rpx;
			color: #000;
			.address{
				display: flex;
				justify-content: center;
				align-items: center; 
				width: 160rpx;
				height: 36rpx; 
				margin: 30rpx 0 30rpx 0;  
				font-size: 26rpx;
				border-right: 1rpx solid #d8d8d8;
				image{
					width: 20rpx;
					height: 24rpx;
				}
				.city{
					margin: 0 6rpx 0 10rpx;
				}
			}  
			.search{
				display: flex;
				justify-content:space-between;
				align-items: center; 
				height: 60rpx;
				padding: 4rpx 24rpx;
				margin: 0 auto;
				margin-left: 30rpx;
				background-color: #fff;
				border-radius: 44rpx;
				.search_btn{
					width: 104rpx;
					height: 60rpx;
					font-size:24rpx ;
					background-color: $uni-main;
					border-radius: 31rpx;
					line-height: 60rpx;
				}
			}
		} 
	}
	.tabsnav{
		// position: fixed;
		margin-top: -5rpx;
		width: 750rpx;	 
		// height: 90rpx;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	} 
	.userList{
		position: relative;
		width: 690rpx;
		padding: 18rpx 30rpx 0 30rpx;  
		 // #ifdef MP-WEIXIN
		 margin-top: 30rpx;
		 // #endif 
		 // #ifdef H5
		 margin-top: 0;
		 // #endif 
	}
	.user_item{
		position: relative;
		width:670rpx;
		padding:0 20rpx 12rpx 0;
		margin-bottom: 16rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
		.user_name{
			max-width: 160rpx; 
			font-weight: bold;
		}
		.user_collect{
			margin-left: 12rpx;
			font-size: 24rpx;
			color: #696969;
			image{
				width: 28rpx;
				height: 26rpx;
			}
		}
		.user_pho{
			position: relative;
			width: 208rpx;
			height: 208rpx;
			.e_icon{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
			}
		}
		.picture{
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin: 21rpx auto; 
			border-radius:50%;
			overflow: hidden; 
			z-index: 1;
			image{
				width: 160rpx;
				height: 160rpx;
			} 
		} 
		.label{
			position: absolute; 
			bottom: 8rpx;
			width: 128rpx;
			height: 34rpx;  
			border-radius: 18rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 34rpx;
			z-index: 3;
		}
		.label_bg1{
			background: #24C276;
		}
		.label_bg2{
			background: #FF9023;
		}
		.label_bg3{
			background: #AEAEAE;
		}
		.img_tip{
			width: 20rpx;
			height: 22rpx;
			margin-right: 4rpx;
		}
		.item_float{
			position: absolute;
			right: 20rpx; 
			padding: 10rpx 14rpx;
			// background: rgba(154, 193, 255, .3) ;
			background: $uni-main-near;
			border-radius: 4rpx;
			color: $uni-main-c;
			font-size: 22rpx;
			font-weight: 400;
			// opacity: 0.3;
		}
		.item_btn{
			position: absolute;
			right: 20rpx;
			bottom: 28rpx;
			width: 176rpx;
			height: 50rpx; 
			background-color: $uni-main;
			border-radius: 30rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}
	.brown{
		color:$uni-main-c ;
	}
	.location{
		padding: 200rpx 0 100rpx 0;
		.location_empty{
			position: relative;
			width: 368rpx;
			margin: 0 auto;
			.address_icon{
				width: 100%;
			}
			.icon_error{
				position: absolute;
				left: 196rpx;
				top: 142rpx;
				width: 56rpx;
				height: 56rpx; 
				z-index: 1;
			}
		}
		.again_btn{
			position: relative;
			width: 234rpx;
			height: 62rpx;
			margin: 0 auto;
			margin-top: -90rpx;
			border-radius: 38rpx;
			background-color: $uni-main;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 62rpx;
			z-index: 2;
		}
		.locating{
			width: 676rpx;
			margin: 0 auto;
			text-align: center;
			font-size: 28rpx;
			color: #8A8A8A;
		}
		.location_tips{
			width: 676rpx;
			margin: 60rpx auto;
			text-align: left;
			font-size: 28rpx;
			color: #8A8A8A;
			line-height: 42rpx;
		}
	}
</style>
